<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basic">
        <el-form :model="info" label-width="150px" label-position="left">
          <el-row>
            <el-col :span="12">
              <el-form-item label="编辑ID" prop="editId">
                <span>{{ info.editId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本月处理字数" prop="monthProcessedWords">
                <span>{{ info.monthProcessedWords }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="userName">
                <span>{{ info.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="累计处理字数" prop="totalProcessedWords">
                <span>{{ info.totalProcessedWords }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="mobile">
                <span>{{ info.mobile }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="createTime">
                <span>{{ info.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <span>{{ info.email }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最后登陆" prop="loginTime">
                <span>{{ info.loginTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号状态" prop="center">
                <template>
                  <el-switch v-model="info.status" active-value="0" inactive-value="1"
                    @change="handleStatusChange(info)"></el-switch>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登陆次数" prop="loginCount">
                <span>{{ info.loginCount }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="科藤备注" prop="remark">
                <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="订单信息" name="columnInfo">
        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
          <el-table-column label="订单编号" prop="orderSnId" min-width="15%" :show-overflow-tooltip="true" align="center" />
          <el-table-column label="服务类型" prop="typeName" min-width="10%" :show-overflow-tooltip="true" align="center" />
          <el-table-column label="字数" prop="wordSize" min-width="10%" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ [5, 9, 10].includes(scope.row.serviceId) ? '/' : scope.row.wordSize }}
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="processMoney" min-width="10%" :show-overflow-tooltip="true"
            align="center" />
          <el-table-column label="目标期刊" min-width="10%" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ [5, 6, 7].includes(scope.row.serviceId) ? '/' : (scope.row.targetJournal || '无') }}
            </template>
          </el-table-column>
          <el-table-column label="专业领域" min-width="10%" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ [9, 10].includes(scope.row.serviceId) ? '/' : (scope.row.professionalField || '无') }}
            </template>
          </el-table-column>

          <el-table-column label="文件数量" align="center" min-width="10%" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="showFile(scope.row)">{{ scope.row.fileCount }}</el-button>

            </template>
          </el-table-column>
          <el-table-column label="订单状态" prop="orderStatus" min-width="10%" :show-overflow-tooltip="true"
            :formatter="getOrderStatusText" align="center">

          </el-table-column>
          <el-table-column label="服务状态" prop="serviceStatus" min-width="10%" :show-overflow-tooltip="true"
            :formatter="getServiceStatusText" align="center" />

          <el-table-column label="返稿时间" prop="returnTime" min-width="10%" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.returnTime) }}
            </template>
          </el-table-column>
          <el-table-column label="派稿时间" prop="dispatchTime" min-width="10%" :show-overflow-tooltip="true"
            align="center" />
          <el-table-column label="科藤备注" prop="ktRemark" :formatter="ktRemark" min-width="10%"
            :show-overflow-tooltip="true" align="center" />

        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button @click="close()">关闭</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>

      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" title="文件列表" width="80%" :beforeClose="beforeCloseHandler">
      <el-table :data="fileList" border>
        <el-table-column label="文件名" prop="fileName" header-align="center"></el-table-column>
        <el-table-column label="文件大小" prop="fileSize" header-align="center">
          <template slot-scope="scope">
            {{ formatSize(scope.row.fileSize) }}
          </template>
        </el-table-column>
        <el-table-column label="上传时间" prop="uploadTime" header-align="center"></el-table-column>
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDownload(scope.row)">下载</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
            <!-- 其他操作按钮 -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>




<script>
import { getInfo, update, orderListTable, getFileList, deleteFile } from "@/api/edit/edit";
import { formatSize } from "@/utils/file";
import { download } from "@/utils/dowload";
import { formatDate } from "@/utils/time"
export default {
  name: "showTable",
  data() {
    return {
      // 选中选项卡的 name
      activeName: "basic",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      // 表详细信息
      info: {},
      dialogVisible: false,
      fileList: [ // 你的文件列表数据，可以从后端获取或模拟数据
        // {
        //   fileName: 'file1.txt',
        //   fileSize: '10MB',
        //   uploadTime: '2024-01-08 09:00:00'
        // },
        // 其他文件数据
      ]
    };
  },
  created() {
    const tableId = this.$route.params && this.$route.params.tableId;
    if (tableId) {
      // 获取表详细信息
      getInfo(tableId).then(res => {
        this.info = res.data;
      });
      orderListTable(tableId).then(res => {
        this.columns = res.rows;
      });

    }
  },
  methods: {
    formatSize,
    formatDate,
    /** 提交按钮 */
    submitForm() {
      update(this.info).then(res => {
        this.$modal.msgSuccess(res.msg);
        if (res.code === 200) {
          this.close();
        }
      });
    },
    beforeCloseHandler(done) {
      // 调用 done() 表示可以关闭对话框，不调用则会阻止对话框关闭
      done();
      const tableId = this.$route.params && this.$route.params.tableId;
      if (tableId) {
        // 获取表详细信息
        getInfo(tableId).then(res => {
          this.info = res.data;
        });
        orderListTable(tableId).then(res => {
          this.columns = res.rows;
        });
      }

    },

    ktRemark(row) {
      if (row.ktRemark) {
        return row.ktRemark;
      } else {
        return "无";
      }
    },

    getOrderStatusText(row) {
      const statusMap = {
        '-1': '已取消',
        '0': '待定价',
        '1': '已定价',
        '2': '待支付',
        '3': '待确认',
        '4': '处理中',
        '5': '待派稿',
        '6': '已返稿',
        '7': '返回编辑确认',
        '8': '待审核',
        '9': '未通过',
        '10': '已确认',
        '11': '已完成',
      };
      return statusMap[row.orderStatus] || '未知状态';
    },
    getServiceTypeText(row) {
      const typeMap = {
        '0': '基础服务',
        '1': '数据作图与科研绘图服务',
        // 可以根据实际情况添加更多类型映射
      };
      return typeMap[row.serviceType] || '未知类型';
    },
    getServiceStatusText(row) {
      const statusMap = {
        '0': '正常',
        '1': '反馈',
        '2': '售后',
        // 根据实际情况添加更多状态映射
      };
      return statusMap[row.serviceStatus] || '未知状态';
    },
    handleStatusChange(row) {

    },
    showFile(row) {
      this.dialogVisible = true;
      var query = { "id": row.id }
      console.log(query)
      getFileList(query).then(res => {
        this.fileList = res.rows;
      });

    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        });
      });
    },
    handleDownload(row) {
      // 处理下载逻辑
      download("https://keteng-ps.oss-cn-hangzhou.aliyuncs.com" + row.filePath, row.fileName)
    },
    handleDelete(row) {
      this.$confirm(`确定要删除文件：${row.fileName}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除，执行相应的删除逻辑
        deleteFile(row.id).then(res => {
          this.$modal.msgSuccess(res.msg);
          if (res.code === 200) {
            const index = this.fileList.findIndex(item => item.id === row.id);
            if (index !== -1) {
              this.fileList.splice(index, 1); // 从数组中删除指定索引的元素
            }
          }
        });
        console.log('删除文件：', row.fileName);
        // 这里添加具体的删除文件逻辑
      }).catch(() => {
        // 取消删除
      });
    },

    /** 关闭按钮 */
    close() {
      const obj = { path: "/edit/", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    }
  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
  }
};
</script>